<template>
  <div class="box">
    <div class="logo-position">
      <img src="@/assets/images/logo.png" alt="logo" /><span>达人小工具</span>
    </div>

    <div class="box-content">
      <el-card class="box-card-right">
        <div class="text-item">
          <div class="logo-div1"><span>注 册 账 号</span></div>
          <div class="logo-div3"><el-input v-model="register.mobile" type="text" placeholder="请输入手机号码" :prefix-icon="Calendar"
              style="width: 250px" size="large" /></div>
          <div class="logo-div4"><el-input v-model="register.password" type="password" placeholder="请输入密码" :prefix-icon="Lock"
              style="width: 250px" size="large" show-password /></div>
          <div class="logo-div6">
            <el-input v-model="register.code" type="text" placeholder="验证码" :prefix-icon="Calendar"
              style="width: 130px;" size="large" />
            <el-button v-if="!sms.disabled" @click="sendCode" size="large" style="margin-left:20px; width: 110px;">发送验证码</el-button>
            <el-button v-else disabled size="large" style="margin-left:20px;width: 110px;">{{ sms.count }} 秒后重新发送</el-button>
          </div>
          <div class="logo-div7"><span>注册即表明同意 <span style="color: #410be4;"> 服务协议 </span> 和 <span
                style="color: #410be4;"> 隐私协议 </span></span></div>
          <div class="logo-div5"><el-button type="primary" size="large" style="width: 250px" @click="registerUser">注册</el-button></div>
        </div>
      </el-card>

    </div>
  </div>
  <el-divider />
</template>

<script setup lang="ts">
import { Calendar, Lock } from '@element-plus/icons-vue'
import {  reactive } from 'vue'
import { mobileRegExp } from '@/utils/validate'


const register = reactive({
	mobile: '',
	code: '',
  password:''
})
const sms = reactive({
  disabled: false,
  total: 60,
  count: 0
})

// 发送短信验证码
const sendCode = () => {

  if (register.mobile.length === 0) {
		ElMessage.error('请输入手机号')
		return
	}
	if (!mobileRegExp.test(register.mobile)) {
		ElMessage.error('请输入正确的手机号')
		return
	}
  timerHandler()
	/* useSendCodeApi(register.mobile).then(() => {
		处理调用短信接口服务
	}) */
}
// 计时器处理器
const timerHandler = () => {
	sms.count = sms.total
	sms.disabled = true

	let timer = setInterval(() => {
		if (sms.count > 1 && sms.count <= sms.total) {
			sms.count--
		} else {
			sms.disabled = false
			clearInterval(timer)
		}
	}, 1000)
}

import { useRouter } from "vue-router"; 
import { ElMessage } from 'element-plus';
const router = useRouter();

const registerUser=()=>{
  /* 注册成功返回登录页面 */
  ElMessage.success('注册成功')
  router.push("/login");
}
</script>


<style scoped lang="scss" >
@import "./index.scss";
</style>